<template>
  <vxe-modal :title="title" v-model="visible" @close="close()" width="900px" :position="{ top: 100 }">
    <el-form ref="formRef" :model="form" :rules="rules" label-position="top" inline :disabled="type == 'detail'">
      <el-form-item label="图片标题" prop="photo_name">
        <el-input placeholder="请输入" clearable v-model="form.photo_name"></el-input>
      </el-form-item>
      <el-form-item label="图片标签" prop="photo_tag">
        <el-select v-model="form.photo_tag" placeholder="请选择" clearable filterable>
          <el-option v-for="item in options.tag" :key="item" :label="item" :value="item"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="作者" prop="user_id">
        <el-select v-model="form.user_id" placeholder="请选择" clearable filterable>
          <el-option v-for="item in options.user" :key="item.user_id" :label="item.nickname" :value="item.user_id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片封面" prop="photo_path">
        <el-image
          v-if="form.photo_path"
          style="width: 40px; height: 40px; margin-right: 10px"
          :src="form.photo_path"
          :zoom-rate="1.2"
          :preview-src-list="[form.photo_path!]"
          fit="cover"
        />
        <Upload action="public/uploadImg" btnText="修改" @success="handleUploadImg"></Upload>
      </el-form-item>
      <el-form-item label="图片描述" class="editor" prop="photo_describe">
        <Editor v-model="form.photo_describe"></Editor>
      </el-form-item>
    </el-form>
    <template #footer>
      <div v-if="type != 'detail'">
        <el-button @click="close()">关闭</el-button>
        <el-button type="primary" @click="submit()">确定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script lang="ts" setup>
import { ref, defineExpose, reactive, defineProps, defineEmits } from "vue"
import { commonRules } from "@/utils/validate"
import { ElMessage } from "element-plus"
import { getInfoById, addphoto, editphoto } from "@/api/photoManage/photo"
import Editor from "@/components/Editor/index.vue"
import Upload from "@/components/Upload/index.vue"

import { Type, Id, Form } from "./type"

let type = ref<Type>("add")
const title = ref("")
const visible = ref(false)
const emits = defineEmits(["refreshList"])
const props = defineProps<{
  options: any
}>()

const formRef = ref()
const form = reactive(setDefaultForm())
const rules = reactive({
  photo_name: commonRules.requiredInput,
  photo_tag: commonRules.requiredSelect,
  user_id: commonRules.requiredInput,
  photo_path: commonRules.requiredInput,
  photo_describe: commonRules.requiredInput
})

function setDefaultForm(): Form {
  return {
    photo_name: "",
    photo_tag: "",
    photo_describe: "",
    user_id: "",
    photo_id: "",
    photo_path: ""
  }
}

function submit() {
  formRef.value.validate((valid: boolean) => {
    if (!valid) return

    const api = type.value == "add" ? addphoto : editphoto

    api(form).then(() => {
      ElMessage.success("操作成功")
      close()
      emits("refreshList")
    })
  })
}

function close() {
  visible.value = false
  Object.assign(form, setDefaultForm())
  formRef.value.resetFields()
}

function open({ type: t, photo_id }: { type: Type; photo_id?: Id }) {
  type.value = t
  form.photo_id = photo_id
  title.value = { add: "新增", edit: "编辑", detail: "详情" }[type.value]

  getInfo()
  visible.value = true
}

function getInfo() {
  if (type.value === "add") return

  getInfoById({ photo_id: form.photo_id }).then((res) => {
    Object.assign(form, res.data)
  })
}

function handleUploadImg(data: any) {
  form.photo_path = data.file
}

defineExpose({ close, open })
</script>

<style lang="scss" scoped>
@import "@/styles/mixins.scss";

.el-form {
  @include grid-container($columns: 2, $non-grid-item-selector: ".editor");
}
</style>
